<template>
	<view class="individualization">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<u-toast ref="uToast"></u-toast>
		<template v-if="!isShowResult">
			<u-loading-page :loading="isLoading" loading-text="正在为您寻找车辆"></u-loading-page>
			<view class="content" v-show="!isLoading">
				<view class="bikeParams" v-for="(item,index) in bikeParams" :key="index">
					<view class="title">{{item.title}}</view>
					<view class="params">
						<view class="option" :class="{active: isActive(item,sIndex)}"
							v-for="(sItem,sIndex) in item.params" :key="sIndex" @click="clickHandle(item,sIndex)">
							{{sItem.label}}
						</view>
					</view>
				</view>
				<view class="tip">可以只选一个选项</view>
				<view class="btn">
					<u-button @click="clear" text="清空"></u-button>
					<u-button @click="submit" text="确定" type="primary"></u-button>
				</view>
			</view>
		</template>
		<template v-else>
			<u-button @click="agineSearch">重新查找</u-button>
			<view v-if="searchResult.length > 0" class="searchResult">
				<view class="bike" v-for="item in searchResult" :key="item.id" @click="goBikeDetail(item)">
					<image :src="imgUrl + item.img.split(',')[0]"></image>
					<view class="bikeParams">
						<view class="bikeName"> {{item.name}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="data" :icon="empty"></u-empty>
			</view>
		</template>
	</view>
	</view>
</template>

<script>
	import stepsItem from '../../uni_modules/uview-ui/libs/config/props/stepsItem'
	import request from '../../api/index.js'
	import {
		imgUrl
	} from '../../util/index.js'
	export default {
		data() {
			return {
				isLoading: false,
				imgUrl,
				empty: require('../../static/images/empty.jpg'),
				bikeParams: [{
						title: '车架',
						params: [{
								label: '碳纤维',
								value: true
							},
							{
								label: '铝合金',
								value: false
							}
						],
					}, {
						title: '前叉',
						params: [{
								label: '碳纤维',
								value: true
							},
							{
								label: '铝合金',
								value: false
							}
						]
					},
					{
						title: '轮组',
						params: [{
								label: '碳纤维',
								value: true
							},
							{
								label: '铝合金',
								value: false
							}
						]
					},
					{
						title: '刹车',
						params: [{
								label: '油压碟刹',
								value: 5
							},
							{
								label: '机械碟刹',
								value: 6
							},
							{
								label: '线拉油碟',
								value: 7
							},
							{
								label: '圈刹',
								value: 8
							}
						]
					},
					{
						title: '变速',
						params: [{
								label: '电变',
								value: true
							},
							{
								label: '机械变速',
								value: false
							}
						]
					}
				],
				frameIndex: '', //车架激活状态索引
				frontForkIndex: '',
				wheelSetIndex: '',
				brakeIndex: '',
				variableSpeedIndex: '',
				params: {
					pageNum: 1,
					pageSize: 10
				},
				form: {
					frame: '', //车架
					frontFork: '', //前叉
					wheelSet: '', //轮组
					brake: '', //刹车
					variableSpeed: '', //变速
				},
				searchResult: [],
				isShowResult: false
			}
		},
		methods: {
			agineSearch() {
				this.isShowResult = false;
				this.isLoading = false
			},
			submit() {
				if (!this.isEmpty) {
					this.isLoading = true
					setTimeout(() => {
						request('/bike/individualization/list', {
							...this.params,
							...this.form
						}, 'GET').then(res => {
							if (res.status === 0) {
								this.isLoading = false;
								this.isShowResult = true
								this.searchResult = res.data.data
							}
						})
					}, 3000)
				} else {
					this.$refs.uToast.show({
						type: 'default',
						message: '至少选择一个标签',
					})
				}
			},
			clickHandle(item, index) {
				if (item.title === '车架') {
					this.frameIndex = index;
					this.form.frame = item.params[index].value
				} else if (item.title === '前叉') {
					this.frontForkIndex = index;
					this.form.frontFork = item.params[index].value
				} else if (item.title === '轮组') {
					this.wheelSetIndex = index;
					this.form.wheelSet = item.params[index].value
				} else if (item.title === '刹车') {
					this.brakeIndex = index;
					this.form.brake = item.params[index].value
				} else if (item.title === '变速') {
					this.variableSpeedIndex = index;
					this.form.variableSpeed = item.params[index].value
				}
			},
			goBikeDetail(item) {
				uni.navigateTo({
					url: `/pages/bikeDetail/bikeDetail?bikeId=${item.id}&&bikeType=${item.bikeType}`
				})
			},
			clear() {
				let newFrom = {
					...this.form
				}
				Object.keys(this.form).forEach((key) => {
					this.$set(this.form, key, '')
				})
				this.frameIndex = ''; //车架激活状态索引
				this.frontForkIndex = '';
				this.wheelSetIndex = '';
				this.brakeIndex = '';
				this.variableSpeedIndex = '';
			}
		},
		computed: {
			isActive() {
				return (item, sIndex) => {
					switch (item.title) {
						case '车架':
							return this.frameIndex === sIndex;
						case '前叉':
							return this.frontForkIndex === sIndex;
						case '轮组':
							return this.wheelSetIndex === sIndex;
						case '刹车':
							return this.brakeIndex === sIndex;
						case '变速':
							return this.variableSpeedIndex === sIndex
						default:
							return false
							break;
					}
				}
			},
			isEmpty() {
				return Object.keys(this.form).filter(key => {
					return this.form[key] !== ''
				}).length === 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.individualization {
		width: 100%;
		background: linear-gradient(#CFEAFF, #F6F6F6);
		height: 100vh;

		.content {
			margin: 0 50rpx 50rpx;

			.bikeParams {
				.title {
					display: block;
					font-size: 40rpx;
					line-height: 1.5;
					font-weight: 600;
					margin-bottom: 30rpx;
				}

				.params {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					align-items: center;
					// margin-bottom: 15rpx;

					.option {
						background: #FFFFFF;
						border-radius: 6rpx;
						border: 1px solid #CDD6E7;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 1.2;
						padding: 18rpx 24rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;

						&.active {
							border: 1px solid #FA3534;
						}
					}
				}
			}

			.tip {
				color: red;
			}

			.btn {
				width: 86%;
				position: fixed;
				bottom: 20rpx;
				display: flex;

				::v-deep.u-button {
					width: 100%;
				}
			}
		}

		::v-deep.u-loading-page {
			.u-loading-page__warpper__text {
				font-size: 40rpx !important;
			}

			.u-loading-icon__spinner--circle {
				width: 50rpx !important;
				height: 50rpx !important;
			}
		}

		.searchResult {

			.bike {
				margin-bottom: 40rpx;

				image {
					width: 100%;
				}

				.bikeParams {
					text-align: center;

					.bikeName {
						margin: 20rpx auto
					}
				}
			}
		}
	}
</style>
